<script setup>
import { ref, watchEffect } from 'vue'
import { getAddGroupList } from '../../api/api'
let props = defineProps({
    dialogFormVisible: Boolean,
    addchuanadminId: Number
})
let page = ref(1)
let total = ref(null)
let pageSize = ref(10)
watchEffect(() => {
    if (props.dialogFormVisible) {
        getAddUser()
    }
})
async function getAddUser() {
    try {
        let res = await getAddGroupList(props.addchuanadminId, page.value, pageSize.value)
        console.log(res);
        if (res.code == 200) {
            total.value = res.total
            chuangData.value = res.rows
        }
    } catch (error) {
        console.log(error);

    }
}
let chuangData = ref([])
let emits = defineEmits(["close", 'update:formlist'])
let closefun = () => {
    emits("close")
    page.value = 1
}
async function getCurrentPage(e) {
    console.log("获取当前页", e);
    page.value = e
    // getAddUser()
}
</script>
<template>
    <div class="editclass">
        <el-dialog :model-value="dialogFormVisible" style="padding: 40px;width: 800px" title="select User"
            @close="closefun">
            <div class="tab">
                <el-table stripe :data="chuangData" style="width: 100%;" :fit="true" v-if="chuangData.length > 0">

                    <el-table-column width="55" />
                    <el-table-column property="username" label="name" />
                    <el-table-column property="nickname" label="nickname" />
                    <el-table-column property="userType" label="type">
                        <template #default="scope">
                            <span>{{ {
                                1: 'Administrator', 2: 'Distributor', 3: 'End User',
                            }[scope.row.userType] }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column property="userLevel" label="level">
                        <template #default="scope">
                            <span>{{ {
                                6: 'T1', 7: 'T2', 8: 'T3', 9: 'T4', 10:
                                    'T5'
                            }[scope.row.userLevel] }}</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="display: flex;justify-content: end;align-items: center; margin-top: 25px">
                    <el-pagination background layout="prev, pager, next" :page-count="Math.ceil(total / pageSize)"
                        style="text-align: end;" :current-page='page' @current-change="getCurrentPage" />
                </div>
            </div>

        </el-dialog>

    </div>
</template>

<style lang="scss" scoped>
.one {
    display: flex;
}

.two-column-form .form-row {
    display: flex;
    justify-content: space-between;
}

.two-column-form .el-form-item {
    width: 48%;
}

.address-container {
    display: flex;
    align-items: center;
}

/* 调整表单标签宽度 */
.two-column-form :deep(.el-form-item__label) {
    width: 80px;
    text-align: right;
    padding-right: 12px;
}

/* 响应式设计 - 小屏幕时变为单列 */
@media (max-width: 768px) {
    .two-column-form .form-row {
        flex-direction: column;

        .el-form-item {
            width: 100%;
        }
    }

    .address-container {
        flex-direction: column;
        align-items: flex-start;

        .el-select {
            width: 100% !important;
            margin-right: 0 !important;
            margin-bottom: 10px;
        }
    }
}
</style>